<template>
  <view>
    <!-- 我的收获地址 -->
    <view style="margin: 30rpx; border-radius: 20rpx; background-color: white">
      <view
        style="padding: 20rpx; display: flex; justify-content: space-between"
      >
        <view> 马文杰 13277226109</view>
        <view class="mr">默认</view>
        <view></view>
        <image
          src="/static/imgs/bj.png"
          style="height: 40rpx; width: 40rpx"
        ></image>
      </view>
      <!-- 地址 -->
      <view
        style="
          padding: 20rpx;
          display: flex;
          font-size: 25rpx;
          color: gray;
          justify-content: space-between;
        "
      >
        <view>广东省广州市天河区</view>
      </view>
    </view>

    <!-- 新增收货地址 -->
    <view class="btn" @click="show1 = true"> 新增收货地址 </view>

    <u-popup :show="show1" @close="show1 = false" closeable="true">
      <view style="height: 800rpx; background-color: #f1f1f1">
        <view
          style="
            text-align: center;
            margin-top: 0rpx;
            background-color: white;
            padding: 20rpx;
            margin-bottom: 10rpx;
          "
          >添加地址</view
        >
        <!-- 收货人 -->
        <view class="xzBox">
          <view style="margin-top: 20rpx; margin-left: 30rpx">收货人</view
          ><input
            type="text"
            style="padding: 20rpx; text-align: right"
            placeholder="请输入收货人姓名"
          />
        </view>
        <!-- 电话 -->
        <view class="xzBox">
          <view style="margin-top: 20rpx; margin-left: 30rpx">电话</view
          ><input
            type="text"
            style="padding: 20rpx; text-align: right"
            placeholder="请输入收货人电话"
          />
        </view>
        <!-- 地区 -->
        <view class="xzBox">
          <view style="margin-top: 20rpx; margin-left: 30rpx">地区</view>
          <view
            style="margin-top: 20rpx; margin-right: 20rpx; color: gray"
            @click="show2 = true"
            >请选择</view
          >
        </view>

        <!-- 详细地址 -->
        <view class="xzBox">
          <view style="margin-top: 20rpx; margin-left: 30rpx">详细地址</view
          ><input
            type="text"
            style="padding: 20rpx; text-align: right"
            placeholder="请输入详细收货地址"
          />
        </view>
        <view
          style="display: flex; margin: 30rpx; justify-content: space-between"
        >
          <view>设置默认</view>
          <u-switch v-model="muoren" @change="change"></u-switch>
        </view>
        <u-picker
          :show="show2"
          ref="uPicker"
          :columns="columns"
          @confirm="confirm"
          @change="changeHandler"
        ></u-picker>

        <!-- 确认 -->
        <view class="btn" @click="show1 = false"> 确认 </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show1: true,
      show2: false,
      muoren: false,
      columns: [
        ["中国", "美国"],
        ["深圳", "厦门", "上海", "拉萨"],
      ],
      columnData: [
        ["深圳", "厦门", "上海", "拉萨"],
        ["得州", "华盛顿", "纽约", "阿拉斯加"],
      ],
    };
  },
  methods: {
    changeHandler(e) {
      const {
        columnIndex,
        value,
        values, // values为当前变化列的数组内容
        index,
        // 微信小程序无法将picker实例传出来，只能通过ref操作
        picker = this.$refs.uPicker,
      } = e;
      // 当第一列值发生变化时，变化第二列(后一列)对应的选项
      if (columnIndex === 0) {
        // picker为选择器this实例，变化第二列对应的选项
        picker.setColumnValues(1, this.columnData[index]);
      }
    },
    confirm(e) {
      console.log("confirm", e);
      this.show2 = false;
    },
  },
};
</script>

<style lang="less">
.xzBox {
  display: flex;
  justify-content: space-between;
  margin-top: 1rpx;
  background-color: white;
  //   border-top: 1rpx solid red;
}
.btn {
  height: 80rpx;
  position: absolute;
  bottom: 50rpx;
  margin: 30rpx;
  width: 90%;
  text-align: center;
  line-height: 80rpx;
  background-color: brown;
  color: white;
  border-radius: 20rpx;
  font-size: 30rpx;
}
.mr {
  margin-left: 30rpx;
  height: 40rpx;
  width: 70rpx;
  border: 1rpx solid brown;
  text-align: center;
  border-radius: 10rpx;
  font-size: 25rpx;
  line-height: 40rpx;
  color: brown;
}
page {
  font-size: 30rpx;
  background-color: #f1f1f1;
}
</style>
